<template>
    <div class="arcgis-container">
        <div id="viewDiv"></div>
        <div id="title">
            <h1>测试用例</h1>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import Map from '@arcgis/core/Map'
import SceneView from '@arcgis/core/views/SceneView'
import * as intl from "@arcgis/core/intl.js";
// 地图绘画相关
import Graphic from "@arcgis/core/Graphic.js";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";

let map, view;

onMounted(() => {
    intl.setLocale('zh-CN')

    const map = new Map({                // Create a Map object
        basemap: "streets-vector",
        // layers: additionalLayers             // Optionally, add additional layers collection
    });

    const view = new SceneView({      // The View for the Map object
        map: map,
        container: "viewDiv",
        camera: {
        position: [
            120.4, // lon
            36.1, // lat
            50000  // elevation in meters
        ],
        heading: 95, // direction the camera is looking
        tilt: 65 // tilt of the camera relative to the ground
    }
    });

    // title组件
    const title = document.getElementById('title')
    view.ui.add(title, 'top-right');

    // 点击事件
    view.popupEnabled = false;  // Disable the default popup behavior

    view.on("click", function(event) { // Listen for the click event
        console.log(event);
        view.hitTest(event).then(function (hitTestResults){ // Search for features where the user clicked
            if(hitTestResults.results) {
                console.log(hitTestResults);
                view.openPopup({ // open a popup to show some of the results
                    location: event.mapPoint,
                    title: "Hit Test Results",
                    content: hitTestResults.results.length + "Features Found"
                });
            }
        })
    });
});

</script>

<style scoped lang="scss">
#viewDiv {
    width: 100%;
    height: calc(100vh - 160px);
}
</style>